import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image, ScrollView, Block} from '@tarojs/components';
import {AtIcon} from 'taro-ui'
import Category from './component/category';
import {BUSINESS_ALL_NEAREST, RESOURCE_URL, TARO_ENV} from "../../../../constants/api";
import {http} from "../../../../utils/http";
import './index.scss';

interface IProps {
  isUser: any
  data: any
  loadMoreStatus: any
  systemInfo?: any
  onChange: any
  onScroll: any
}

interface IState {
  street: any
  menuInfo: any
  labelIndex: any
  businessDistrictIndex: any
  search: any
  active: number
  active1: number
  active2: number
  showList: any
  showDown: boolean
  showDown1: boolean
  showDown2: boolean
  showDown3: boolean
}

export default class RegionalCategory extends Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }

  state: IState = {
    street: [],
    menuInfo: '',
    labelIndex: 0,
    search: {},
    active: 0,
    businessDistrictIndex: -1,
    active1: -1,
    active2: 0,
    showList: [],
    showDown: false,
    showDown1: false,
    showDown2: false,
    showDown3: false
  }

  async UNSAFE_componentWillMount() {
    if (TARO_ENV === 'weapp') {
      const menuInfo = await Taro.getMenuButtonBoundingClientRect()
      this.setState({menuInfo})
    }
    await this.onLabelClickChange('')
  }

  async select(key, index, indexName, data) {
    const {active, search} = this.state;
    const state: any = {};
    if (key === 'street') {
      this.hideScroll();
      search['longitude'] = data[index].longitude
      search['latitude'] = data[index].latitude
      this.props.onChange(search);
      state.search = search;
      state.businessDistrictIndex = index
      this.setState(state);
      return
    }
    if (key == 'region_category') {
      // 品类icon
      if (active === index) {
        // 防止重复点击一个按钮请求数据
        return false;
      }
      search.region_label = '';
      search.label = '';
      state.active = index;
      state.active1 = null;
    }
    if (key == 'region_label') {
      search.region_category = '';
      search.label = data[index].id;
      state.active1 = index;
    }
    search[indexName] = index;
    if (key == 'region_region') {
      state.active2 = index;
      search.region_label = '';
      search.label = '';
      state.active1 = null;
      await this.onLabelClickChange(data[index].id)
    }
    this.hideScroll();
    const val = search[key]
    search[key] = data[index].id;
    if (key == 'region_label' && val == data[index].id) {
      search.region_category = '';
      state.active1 = -1;
      search[key] = ''
    }
    this.props.onChange(search);
    state.search = search;
    this.setState(state);
    this.setState({showDown3: false});
  }

  async labelClick(index, i, e) {
    e.stopPropagation()
    if (this.state.labelIndex !== i) {
      this.setState({labelIndex: i}, async () => await this.onLabelClickChange(index))
    }
  }

  handlerReset() {
    this.setState({
      active2: 0,
      active1: -1,
      businessDistrictIndex: -1,
      active: 0,
      search: {},
      labelIndex: 0
    })
    this.props.onChange({});
    this.hideScroll();
  }

  stop(e) {
    e.stopPropagation()
  }

  hideScroll() {
    this.setState({
      showDown: false,
      showDown1: false,
      showDown3: false,
      showDown2: false
    });
  }

  downData(showList) {
    this.setState({
      showList,
      showDown: true,
      showDown2: false,
      showDown3: false
    });
    this.props.onScroll();
  }

  downData1(showList) {
    this.setState({
      showList,
      showDown1: true,
      showDown2: false,
      showDown3: false
    });
    this.props.onScroll();
  }

  downData2(showList) {
    this.setState({
      showList,
      showDown2: true,
      showDown3: false,
      showDown1: false
    });
    this.props.onScroll();
  }

  async downData3() {
    this.setState({showDown1: false, showDown: false, showDown2: false, showDown3: true, showList: this.state.street});
    this.props.onScroll();
  }

  async onLabelClickChange(regionId) {
    const location = Taro.getStorageSync('locationData');
    const params = {
      longitude: location.longitude || '',
      latitude: location.latitude || '',
    }
    if (regionId) {
      params.regionId = regionId
    }
    const data = await http.HGet(BUSINESS_ALL_NEAREST, params)
    this.setState({street: data.data || [], showList: data.data || [], businessDistrictIndex: -1})
  }

  handleChange(e) {
    if (!e) {
      e = ''
    }
    if (e) {
      this.setState({labelIndex: -1})
    }
  }

  render() {
    let {data, isUser, loadMoreStatus} = this.props;
    data = data || {};
    data.data = data.data || {};
    data.data.labelsArr = data.data.labelsArr || [];
    const {search, active, active1, active2, showList, showDown, showDown1, showDown2, showDown3, businessDistrictIndex, menuInfo, street} = this.state;
    return (
      <View className='regional-category-wrap'>
        <View className='regional-category'>
          {
            data.data && data.data.category_region_dimension && data.data.category_region_dimension == 1 &&
            <ScrollView enable-flex scrollX className={`scroll-view ${!data.isShow ? `${TARO_ENV}visible` : `${TARO_ENV}hidden`}`} style='margin-bottom: 15px;'>
              <View className='regional-category-nav'>
                {
                  data.data && data.data.category_region_category && data.data.category_region_category.map((item, index) => (
                    <View className='regional-category-nav-item' key={index}
                      onClick={() => this.select('region_category', index, 'categoryIndex', data.data.category_region_category)}
                    >
                      <Image
                        src={active == index ? item.icon_active : item.icon}
                        className='img'
                      />
                      <View
                        className={`regional-category-nav-item-name ${active == index ? 'active' : ''}`}
                      >{item.name}</View>
                    </View>
                  ))
                }
              </View>
            </ScrollView>
          }
          {data.data && data.data.category_region_dimension && data.data.category_region_dimension == 0 &&
          <ScrollView enable-flex scrollX className={`scroll-view ${!data.isShow ? `${TARO_ENV}visible` : `${TARO_ENV}hidden`}`} style='margin-bottom: 15px;'>
            <View className='regional-category-header'>
              {
                data.data.category_region_region.map((item, value) => (
                  <View className='regional-category-header-item' key={value}
                    onClick={() => this.select('region_region', value, 'regionsIndex', data.data.category_region_region)}
                  >
                    <View
                      className={`regional-category-header-item-bottom ${active2 == value ? 'active' : ''}`}
                    >
                      {
                        process.env.P_ENV === 'kd' ?
                        <Text>{item.alias_name || item.name}</Text>
                        :
                        <Text>{item.name}</Text>
                      }
                    </View>
                  </View>
                ))
              }
            </View>
          </ScrollView>
          }
          <View className={`p-lr-20 ${!data.isShow ? `${TARO_ENV}visible` : `${TARO_ENV}hidden`}`}>
            <ScrollView enable-flex scrollX className='scroll-view'>
              <View className='regional-category-select'>
                {
                  data.data && data.data.category_region_dimension && data.data.category_region_dimension == 0 &&
                  <View className='align-item'
                    onClick={() => this.downData2(data.data && data.data.category_region_category)}
                  >
                    <Text className='m-r-10'>
                      {(data.data && data.data.category_region_category && data.data && data.data.category_region_category[search.categoryIndex] && data.data && data.data.category_region_category[search.categoryIndex].name) || '品类'}
                    </Text>
                    <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                  </View>
                }
                {data.data.category_region_dimension == 1 &&
                <View className='align-item' onClick={() => this.downData(data.data && data.data.regions)}>
                  <Text className='m-r-10'>
                    {(
                      data.data && data.data.regions && data.data.regions[search.regionsIndex] && data.data.regions[search.regionsIndex].name
                    ) || '全城'}
                  </Text>
                  <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                </View>}
                {street && street.length > 0 && <View className='align-item' onClick={() => this.downData3()}>
                  <Text className='m-r-10'>
                    {(
                      street && street[businessDistrictIndex] && street[businessDistrictIndex].name
                    ) || '全部商圈'}
                  </Text>
                  <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                </View>}
                <View className='align-item' onClick={() => this.downData1(data.data && data.data.sortArr)}>
                  <Text className='m-r-10'>
                    {(
                      data.data && data.data.sortArr && data.data.sortArr[search.region_sort] && data.data.sortArr[search.region_sort].name
                    ) || '智能排序'}
                  </Text>
                  <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                </View>
                {
                  (
                    (active2 == 0 && data.data.category_region_dimension == 0) ||
                    (active == 0 && data.data.category_region_dimension == 1)
                  ) && data && data.data && data.data.labelsArr && data.data.labelsArr.length > 0 && data.data.labelsArr.map((item, index) => (
                    <View
                      key={index}
                      className={`regional-category-select-item ${active1 == index ? 'active1' : ''}`}
                      onClick={() => this.select('region_label', index, 'region_labelIndex', data.data.labelsArr)}
                    >
                      {item.name}
                    </View>
                  ))
                }
              </View>
            </ScrollView>
          </View>
          {data.isShow &&
          <View className='p-lr-20 while'
            style={`padding-top: ${TARO_ENV === 'weapp' ? (menuInfo.height + menuInfo.top + 4) : 20}px`}
          >
            <View style='position: relative; z-index: 99;padding-bottom: 10px;'>
              {
                data.data && data.data.category_region_dimension && data.data.category_region_dimension == 1 &&
                <ScrollView scrollWithAnimation enable-flex scrollX className='scroll-view' style='margin-bottom: 15px;'>
                  <View className='regional-category-nav'>
                    {
                      data.data && data.data.category_region_category && data.data.category_region_category.map((item, index) => (
                        <View
                          key={index}
                          className='regional-category-nav-item'
                          onClick={() => this.select('region_category', index, 'categoryIndex', data.data.category_region_category)}
                        >
                          <View
                            className={`regional-category-nav-item-name ${active == index ? 'active' : ''}`}
                          >{item.name}</View>
                        </View>
                      ))
                    }
                  </View>
                </ScrollView>
              }
              {
                data.data && data.data.category_region_dimension && data.data.category_region_dimension == 0 &&
                <ScrollView scrollWithAnimation enable-flex scrollX className='scroll-view' style='margin-bottom: 15px;'>
                  <View className='regional-category-header'>
                    {
                      data.data && data.data.category_region_region && data.data.category_region_region.map((item, value) => (
                        <View className='regional-category-header-item'
                          key={value}
                          onClick={() => this.select('region_region', value, 'regionsIndex', data.data.category_region_region)}
                        >
                          <View
                            className={`regional-category-header-item-bottom ${active2 == value ? 'active' : ''}`}
                          >{item.name}</View>
                        </View>
                      ))
                    }
                  </View>
                </ScrollView>
              }
              <ScrollView enable-flex scrollX className='scroll-view'>
                <View className='regional-category-select'>
                  {
                    data.data && data.data.category_region_dimension && data.data.category_region_dimension == 0 &&
                    <View className='align-item'
                      onClick={() => this.downData2(data.data && data.data.category_region_category)}
                    >
                      <Text className='m-r-10'>
                        {(data.data && data.data.category_region_category && data.data && data.data.category_region_category[search.categoryIndex] && data.data && data.data.category_region_category[search.categoryIndex].name) || '品类'}
                      </Text>
                      <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                    </View>
                  }
                  {data.data.category_region_dimension == 1 &&
                  <View className='align-item' onClick={() => this.downData(data.data && data.data.regions)}>
                    <Text className='m-r-10'>
                      {(
                        data.data && data.data && data.data.regions && data.data.regions[search.regionsIndex] && data.data.regions[search.regionsIndex].name
                      ) || '全城'}
                    </Text>
                    <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                  </View>}
                  {street && street.length > 0 && <View className='align-item' onClick={() => this.downData3()}>
                    <Text className='m-r-10'>
                      {(
                        street && street[businessDistrictIndex] && street[businessDistrictIndex].name
                      ) || '全部商圈'}
                    </Text>
                    <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                  </View>}
                  <View className='align-item' onClick={() => this.downData1(data.data && data.data.sortArr)}>
                    <Text className='m-r-10'>
                      {(
                        data.data && data.data.sortArr && data.data.sortArr[search.region_sort] && data.data.sortArr[search.region_sort].name
                      ) || '智能排序'}
                    </Text>
                    <AtIcon prefixClass='car' value='iconxiasanjiaoxing' size='7' color='#333' />
                  </View>
                  {
                    (
                      (active2 == 0 && data.data.category_region_dimension == 0) ||
                      (active == 0 && data.data.category_region_dimension == 1)
                    ) && data && data.data && data.data.labelsArr && data.data.labelsArr.map((item, index) => (
                      <View
                        key={index}
                        className={`regional-category-select-item ${active1 == index ? 'active1' : ''}`}
                        onClick={() => this.select('region_label', index, 'region_labelIndex', data.data.labelsArr)}
                      >
                        {item.name}
                      </View>
                    ))
                  }
                </View>
              </ScrollView>
            </View>
            {/* 排序 */}
            {showDown1 && <View className='down-list-wrap' onClick={() => this.hideScroll()}>
              <View className='down-list' onClick={(e) => {
                () => e.stopPropagation()
              }}
              >
                <ScrollView scrollY className='scroll-view'>
                  {
                    showList.map((item, index) => (
                      <View className='down-list-item'
                        onClick={() => this.select('region_sort', index, 'sortIndex', data.data.sortArr)}
                      >
                        {item.name}
                      </View>
                    ))
                  }
                </ScrollView>
                <View className='reset-btn' onClick={this.handlerReset.bind(this)}>重置</View>
              </View>
            </View>}
            {/* 地区 */}
            {showDown && <View className='down-list-wrap' onClick={() => this.hideScroll()}>
              <View className='down-list' onClick={(e) => {
                () => e.stopPropagation()
              }}
              >
                <ScrollView scrollY className='scroll-view'>
                  {
                    showList.map((item, index) => (
                      <View className='down-list-item'
                        onClick={() => this.select('region_region', index, 'regionsIndex', data.data.regions)}
                      >
                        {item.name}
                      </View>
                    ))
                  }
                </ScrollView>
                <View className='reset-btn' onClick={this.handlerReset.bind(this)}>重置</View>
              </View>
            </View>}
            {/* 商圈 */}
            {showDown3 && <View className='down-list-wrap' onClick={() => this.hideScroll()}>
              <View className='down-list'>
                <ScrollView scrollY className='scroll-view'>
                  {
                    showList.map((item, index) => (
                      <View className='down-list-item down-list-item-street'
                        key={index}
                        onClick={() => this.select('street', index, 'streetIndex', showList)}
                      >
                        <View>{item.name}</View>
                        <View>{item.distance}</View>
                      </View>
                    ))
                  }
                  {showList.length <= 0 && <View className='mepty'>
                    <View className='image-text' style='margin-top: 75px;'>暂无商圈</View>
                  </View>}
                </ScrollView>
                <View className='reset-btn' onClick={this.handlerReset.bind(this)}>重置</View>
              </View>
            </View>}
            {/* 品类 */}
            {showDown2 && <View className='down-list-wrap' onClick={() => this.hideScroll()}>
              <View className='down-list' onClick={(e) => {
                () => e.stopPropagation()
              }}
              >
                <ScrollView scrollY className='scroll-view'>
                  {
                    showList.map((item, index) => (
                      <View className='down-list-item'
                        onClick={() => this.select('region_category', index, 'categoryIndex', data.data.category_region_category)}
                      >
                        {item.name}
                      </View>
                    ))
                  }
                </ScrollView>
                <View className='reset-btn' onClick={this.handlerReset.bind(this)}>重置</View>
              </View>
            </View>}
          </View>
          }
        </View>
        {/* 品类 */}
        {data && data.data && (data.data.category_region_dimension == 0 || data.data.category_region_dimension == 1) && data.goodsData.length > 0 &&
        <Category isReduceBottom={data.isShow} isMinHeight='67vh' isUser={isUser} data={data.goodsData} />}
        {/* 区域 */}
        {data && data.data && (data.data.category_region_dimension == 0 || data.data.category_region_dimension == 1) && data.goodsData.length <= 0 && loadMoreStatus !== 'loading' &&
        <Block>
          <View className='mepty' style='min-height: 67vh'>
            <View className='listNull'>
              <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
              <View className='text'>没有任何商品哦, 去逛逛吧</View>
            </View>
          </View>
        </Block>
        }
      </View>
    )
  }
}
